---
title: Popover
description: Displays rich content in a portal, triggered by a button.
author:
  name: imskyleen
  url: https://github.com/imskyleen
---

<ComponentPreview name="demo-components-radix-popover" />

## Installation

<ComponentInstallation name="components-radix-popover" />

## Usage

```tsx
<Popover>
  <PopoverTrigger>Open popover</PopoverTrigger>
  <PopoverContent>
    <div>Popover content</div>
    <PopoverClose>Close popover</PopoverClose>
  </PopoverContent>
</Popover>
```

## API Reference

### Popover

<div className="flex flex-col gap-2">
<ExternalLink
  href="https://animate-ui.com/docs/primitives/radix/popover#popover"
  text="Animate UI API Reference - Popover Primitive"
/>

<ExternalLink
  href="https://www.radix-ui.com/primitives/docs/components/popover#root"
  text="Radix UI API Reference - Popover.Root"
/>
</div>

### PopoverTrigger

<div className="flex flex-col gap-2">
<ExternalLink
  href="https://animate-ui.com/docs/primitives/radix/popover#popovertrigger"
  text="Animate UI API Reference - Popover Trigger Primitive"
/>

<ExternalLink
  href="https://www.radix-ui.com/primitives/docs/components/popover#trigger"
  text="Radix UI API Reference - Popover.Trigger"
/>
</div>

### PopoverContent

<div className="flex flex-col gap-2">
<ExternalLink
  href="https://animate-ui.com/docs/primitives/radix/popover#popovercontent"
  text="Animate UI API Reference - Popover Content Primitive"
/>

<ExternalLink
  href="https://www.radix-ui.com/primitives/docs/components/popover#content"
  text="Radix UI API Reference - Popover.Content"
/>
</div>

<TypeTable
  type={{
    transition: {
      description: 'The transition of the popover content.',
      type: 'Transition',
      required: false,
      default: "{ type: 'spring', stiffness: 300, damping: 25 }",
    },
    '...props': {
      description: 'The props of the popover content.',
      type: 'HTMLMotionProps<"div">',
      required: false,
    },
  }}
/>

<Callout type="info">
  The `forceMount` and `asChild` properties are not supported in the
  `PopoverContent` component, as it is used for animation.
</Callout>

### PopoverClose

<div className="flex flex-col gap-2">
<ExternalLink
  href="https://animate-ui.com/docs/primitives/radix/popover#popoverclose"
  text="Animate UI API Reference - Popover Close Primitive"
/>

<ExternalLink
  href="https://www.radix-ui.com/primitives/docs/components/popover#close"
  text="Radix UI API Reference - Popover.Close"
/>
</div>

## Credits

- [Radix UI Popover](https://www.radix-ui.com/primitives/docs/components/popover)
- Credit to [shadcn/ui](https://ui.shadcn.com/docs/components/popover) for style inspiration.
